import React from 'react'
import _ from 'underscore'
import View from 'lib/View.jsx'
import RootScope from './RootScope.es6'
import Card from 'lib/components/card.jsx'
import ChartWidget from 'lib/components/ChartWidget.jsx'
import tips from '../common/indicator-tips.jsx'
import addWidgetMixin from '../common/NewDashboardWidget.jsx'

export default class RootView extends View {
  constructor(props){
    super(props);
  }
  render(){
    return (
      <div>
        <div className="box">
          <Card title={
              <span>
                执行时间
                <i className="iconfont" data-tip={tips.os_avg_exec}>&#xe663;</i>
              </span>
            } extra={
              addWidgetMixin(this.scope.chart0Api,'执行时间')
            }>
            <ChartWidget store={this.state.chart0}/>
          </Card>
        </div>
        <div className="box">
          <Card title={
              <span>
                HTTP 响应时间
                <i className="iconfont" data-tip={tips.os_http_resp}>&#xe663;</i>
              </span>
            } extra={
              addWidgetMixin(this.scope.chart1Api,'HTTP 响应时间')
            }>
            <ChartWidget store={this.state.chart1}/>
          </Card>
        </div>
        <div className="box">
          <Card title={
              <span>
                网络错误率
                <i className="iconfont" data-tip={tips.os_http_err}>&#xe663;</i>
              </span>
            } extra={
              addWidgetMixin(this.scope.chart2Api,'网络错误率')
            }>
            <ChartWidget store={this.state.chart2}/>
          </Card>
        </div>
        <div className="box">
          <Card title={
              <span>
                活跃会话数
                <i className="iconfont" data-tip={tips.os_session}>&#xe663;</i>
              </span>
            } extra={
              addWidgetMixin(this.scope.chart3Api,'活跃会话数')
            }>
            <ChartWidget store={this.state.chart3}/>
          </Card>
        </div>
      </div>
    )
  }
}

RootView.defaultProps = {
  Scope:RootScope
}
